// Mathjax to be injected into the document head
export function injectMathJax() {
  if (!window.MathJax) {
    const script = document.createElement('script')
    script.src =
      'https://cdn.bootcdn.net/ajax/libs/mathjax/3.2.0/es5/tex-chtml.js'
    script.async = true
    document.head.appendChild(script)
  }
}

/**
 * 初始化 MathJax
 * @param callback Mathjax加载完成后的回调
 */
export function initMathJax(callback) {
  injectMathJax()
  window.MathJax = {
    tex: {
      // 行内公式标志
      inlineMath: [['$', '$']],
      // 块级公式标志
      displayMath: [['$$', '$$']],
      // 下面两个主要是支持渲染某些公式，可以自己了解
      processEnvironments: true,
      processRefs: true,
    },
    options: {
      // 跳过渲染的标签
      skipHtmlTags: ['noscript', 'style', 'textarea', 'pre', 'code'],
      // 跳过mathjax处理的元素的类名，任何元素指定一个类 tex2jax_ignore 将被跳过，多个累=类名'class1|class2'
      ignoreHtmlClass: 'tex2jax_ignore',
    },
    startup: {
      // 当mathjax加载并初始化完成后的回调
      pageReady: () => {
        callback && callback()
      },
    },
    svg: {
      fontCache: 'global',
    },
  }
}
/**
 * 手动渲染公式 返回 Promise
 * @param el 需要渲染的DOM元素或集合
 * @returns Promise
 */
export function renderByMathjax(el) {
  // mathjax初始化后才会注入version
  if (!window.MathJax.version) {
    return
  }

  if (el && !Array.isArray(el)) {
    el = [el]
  }

  return window.MathJax.typesetPromise(el)
}
